<template>
  <div>
    <nav>
      <!--    login   -->
      <div class="login-box" @touchmove.prevent v-show="show_login">
        <div class="login-cover">
          <i @click="showLogin()" class="icon-close"></i>
          <div class="password-pane">
            <span
              v-for="(t_item, t_index) in pane_title"
              :key="t_index"
              :class="{ active: is_pane === t_index }"
              @click="isPanel(t_index)"
            >
              {{ t_item }}
            </span>
          </div>
          <div class="password-free-login" v-show="isFree && is_logging">
            <div>
              <label for="select">
                <select class="tel-select" name="tel-header" id="select">
                  <option v-for="(item, index) in select" :key="index">
                    {{ item }}
                  </option>
                </select>
                <i class="icon-ud-arrow"></i>
              </label>
              <el-divider direction="vertical"></el-divider>
              <label>
                <input
                  class="tel-input"
                  v-model="user_phone"
                  type="tel"
                  maxlength="11"
                  placeholder="手机号"
                />
              </label>
            </div>
            <div>
              <label>
                <input
                  type="text"
                  v-on:keyup.enter="isLogin"
                  v-model="user_code"
                  maxlength="6"
                  class="phone-code"
                  placeholder="请输入6位短信验证码"
                />
              </label>
              <button
                @click="enterCode()"
                :class="[is_code ? 'wait-code' : 'get-code']"
                :disabled="is_code"
              >
                {{ is_code ? time_count + "后可以重新发送" : "获取短信验证码" }}
              </button>
            </div>
            <!-- <p><span>接收语音验证码</span></p> -->
            <button @click="isLogin()" class="btn-login">
              登录/注册
            </button>
            <div class="protocol">
              <p>未注册手机验证后自动登录</p>
              <p>注册即代表同意《知乎协议》《隐私保护指引》</p>
            </div>
            <div class="fast-login">
              <span>社交账号登录</span>
              <div><i class="icon-wechatl"></i>微信</div>
            </div>
          </div>
          <div class="password-login" v-show="!isFree">
            <div>
              <label>
                <input
                  class="tel-email-input"
                  type="text"
                  maxlength="30"
                  placeholder="手机号或邮箱"
                  required
                />
              </label>
              <i class="icon-unlook"></i>
            </div>
            <div>
              <label>
                <input
                  :type="isPassword ? 'password' : 'text'"
                  minlength="6"
                  maxlength="16"
                  class="password-code"
                  placeholder="密码"
                  @keyup.enter="goLogin()"
                />
              </label>
              <i
                @click="changePass()"
                class="el-icon-view"
                :class="{ unlook: isPassword }"
              ></i>
            </div>
            <p>
              <router-link to="/forget">忘记密码?</router-link>
            </p>
            <button @click="goLogin()" class="btn-login">登录/注册</button>
            <div class="protocol">
              <p>未注册手机验证后自动登录</p>
              <p>注册即代表同意《知乎协议》《隐私保护指引》</p>
            </div>
            <div class="fast-login">
              <span>社交账号登录</span>
              <div><i class="icon-wechatl"></i>微信</div>
            </div>
          </div>
          <div class="logging-info" v-if="!is_logging && isFree">
            <div>
              <label for="">
                账户名
                <el-input
                  placeholder="请输入用户名"
                  v-model="edit_username"
                  maxlength="16"
                  clearable
                >
                </el-input>
              </label>
              <label for="">
                密码
                <el-input
                  placeholder="请输入6-16位密码"
                  v-model="edit_user_password"
                  minlength="6"
                  maxlength="16"
                  @keyup.enter.native="edit_login"
                  show-password
                ></el-input>
              </label>
            </div>
            <button @click="edit_login()" class="btn-next">注册</button>
          </div>
        </div>
      </div>
      <!--   提问   -->
      <div class="quiz-box" v-show="is_quiz">
        <div class="quiz-step" v-show="step_one">
          <i @click="showQuizBox()" class="el-icon-close"></i>
          <h3>添加标题<span>（最多40个字）</span></h3>
          <el-input
            class="select-quiz"
            maxlength="40"
            placeholder="请输入问题"
            v-model="quiz_value"
          >
          </el-input>
          <div class="related-questions" v-show="isLoading">
            <p>相关问题</p>
          </div>
          <el-button
            class="btn-next"
            type="success"
            size="mini"
            @click="stepOne()"
          >
            下一步
          </el-button>
        </div>
        <div class="add-description" v-show="step_two">
          <div>
            <p>{{ quiz_value }}</p>
            <span>
              <i></i>
              <i></i>
            </span>
          </div>
          <el-input
            type="textarea"
            placeholder="添加问题背景描述（选填）"
            maxlength="500"
            show-word-limit
          >
          </el-input>
        </div>
      </div>
      <!--    logo    -->
      <div class="brand">
        <router-link to="/">
          <img src="../assets/images/logo.png" alt="logo" />
        </router-link>
      </div>
      <!--  搜索  -->
      <div class="search-quiz">
        <div>
          <el-input
            :placeholder="placeholder"
            size="medium"
            v-model="search_value"
            @keyup.enter.native="searchGo"
            @focus="inputLong()"
            @blur="inputShort()"
          >
            <i
              slot="prefix"
              @click="searchGo()"
              class="el-input__icon prefix-search el-icon-search"
            ></i>
          </el-input>
        </div>
        <el-button
          class="btn-quiz"
          @click="showQuizBox()"
          type="success"
          size="medium"
          v-show="!input_lang"
          >提问
        </el-button>
      </div>
      <!--  顶部导航  -->
      <ul class="nav-item" v-for="(item, index) in navItem" :key="index">
        <router-link :to="item.navLink">
          <li :class="{ active: classId === index }">
            {{ item.navName }}
          </li>
        </router-link>
      </ul>
      <!--    消息弹层    -->
      <div class="message" @click="showMessages()" v-show="is_login">
        消息
        <transition name="fade">
          <ul class="cover-message" v-show="messageShow">
            <li><i class="icon icon-notice"></i>通知</li>
            <li><i class="icon icon-private-message"></i>私信</li>
            <li><i class="icon icon-invite"></i>邀请</li>
            <li><i class="icon icon-like-two"></i>点赞</li>
            <li><i class="icon icon-comment-two"></i>评论</li>
            <li><i class="icon icon-follow"></i>关注</li>
          </ul>
        </transition>
      </div>
      <!--    用户信息    -->
      <div class="user">
        <img
          @click="clickDown()"
          src="../assets/images/user-avatar.png"
          alt=""
          v-show="is_login"
        />
        <transition name="fade">
          <ul class="user-info-cover" v-show="is_login && is_click">
            <li @click="$router.push('./people')">我的主页</li>
            <li>设置</li>
            <li @click="signOut()">退出</li>
          </ul>
        </transition>
        <el-button
          @click="showLogin()"
          class="user-login"
          type="success"
          size="medium"
          v-show="!is_login"
        >
          登录
        </el-button>
      </div>
    </nav>
    <!--   回到顶部   -->
    <div>
      <router-link to="/hot">
        <div class="feedback"></div>
      </router-link>
      <div @click="gotoTop()" class="icon-to-top"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navtop",
  props: {
    classId: {
      type: Number,
      default: 0
    }
  },
  data: function() {
    return {
      input_lang: false,
      search_value: "",
      user_phone: "",
      user_code: null,
      // 提问区域
      is_quiz: false,
      quiz_value: "",
      isLoading: false,
      step_one: true,
      step_two: false,
      // 是否登录头像
      is_login: false,
      // 登陆中
      is_click: false,
      // 注册中
      is_logging: true,
      // 显示登陆界面
      show_login: false,
      // 用户输入用户名
      edit_username: "",
      // 输入密码
      edit_user_password: "",
      //显示密码
      isPassword: true,
      // 验证码
      phone_code: "",
      is_code: false,
      timer: null,
      time_count: 60,

      token: "",

      // 记录是否注册过
      login_type: null,

      pane_title: ["免密码登录", "密码登录"],
      is_pane: 0,
      isFree: true,
      select_value: "",
      select: ["中国+86", "美国+gg"],
      placeholder: "《轮到你了》反击篇第 18 集",
      messageShow: false,
      navItem: [
        {
          navName: "推荐",
          navLink: "/"
        },
        {
          navName: "关注",
          navLink: "/follow"
        },
        {
          navName: "热榜",
          navLink: "/hot"
        },
        {
          navName: "等你回答",
          navLink: "/question"
        }
      ]
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      this.is_login = true;
    }
  },
  watch: {
    quiz_value() {
      console.log(this.quiz_value);
      this.isLoading = this.quiz_value.length > 3;
    }
  },
  methods: {
    // 提问
    showQuizBox() {
      this.is_quiz = !this.is_quiz;
    },
    stepOne() {
      if (this.quiz_value.length < 4) {
        this.$message({
          message: "标题至少输入4个字",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 50
        });
      } else {
        this.step_one = false;
        this.step_two = true;
      }
    },
    inputLong() {
      this.input_lang = true;
    },
    inputShort() {
      this.input_lang = false;
    },
    // 搜索
    searchGo() {
      this.$router.push({
        path: "/search",
        query: { val: this.search_value, type: 0 }
      }); // 跳转到B
      return false;
    },
    // 60秒
    getCode() {
      const TIME_COUNT = 10;
      if (!this.timer) {
        this.time_count = TIME_COUNT;
        this.is_code = true;
        this.timer = setInterval(() => {
          if (this.time_count > 0 && this.time_count <= TIME_COUNT) {
            this.time_count--;
          } else {
            this.is_code = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    enterCode() {
      if (/^1[34578]\d{9}$/.test(this.user_phone)) {
        // 获取验证码
        this.$axios({
          method: "POST",
          url: "api/Main/Verification",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          data: {
            mobile: this.user_phone
          }
        }).then(res => {
          // console.log(res);
          if (res.data.code === 200) {
            this.getCode();
            this.login_type = res.data.data.register;
            this.phone_code = res.data.data.Verification;
          }
        });
      } else {
        this.$message({
          message: "请填写正确手机号",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 20
        });
      }
    },
    // 检测是否注册和登录
    isLogin() {
      if (/^1[34578]\d{9}$/.test(this.user_phone)) {
        // 登录
        if (this.login_type) {
          this.$axios({
            method: "POST",
            url: "api/Main/sign",
            data: {
              Verification: this.user_code
            }
          }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
              localStorage.setItem("token", res.data.data);
              this.is_login = true;
              this.show_login = false;
              this.$router.go(0);
            } else {
              this.$message({
                message: "验证码错误",
                type: "error",
                customClass: "z-index-tip",
                duration: 2000,
                offset: 20
              });
            }
          });
        } else {
          if (this.user_code === this.phone_code) {
            this.is_logging = false;
          } else {
            this.$message({
              message: "验证码错误",
              type: "error",
              customClass: "z-index-tip",
              duration: 2000,
              offset: 20
            });
          }
        }
      } else {
        this.$message({
          message: "请填写正确手机号",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 20
        });
      }
    },
    // 注册
    edit_login() {
      if (!this.edit_username) {
        this.$message({
          message: "请填写用户名",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 20
        });
      } else if (this.edit_user_password === "") {
        this.$message({
          message: "请填写密码",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 20
        });
      } else if (this.edit_user_password.length < 6) {
        this.$message({
          message: "请填写6-16位密码",
          type: "error",
          customClass: "z-index-tip",
          duration: 2000,
          offset: 20
        });
      } else {
        this.$axios({
          method: "POST",
          url: "api/Main/sign",
          data: {
            username: this.edit_username,
            password: this.edit_user_password,
            Verification: this.phone_code
          }
        }).then(res => {
          console.log(res);
          if (res.data.code === 200) {
            console.log("注册成功！");
            localStorage.setItem("token", res.data.data);
            this.is_login = true;
            this.show_login = false;
          }
        });
      }
    },
    // 密码的变换
    changePass() {
      this.isPassword = !this.isPassword;
    },
    //显示信息
    showMessages: function() {
      this.messageShow = !this.messageShow;
    },
    // 显示登录
    showLogin() {
      this.show_login = !this.show_login;
    },
    // 显示登录导航
    isPanel(index) {
      this.is_pane = index;
      this.isFree = index !== 1;
    },
    // 个人信息
    clickDown() {
      this.is_click = !this.is_click;
    },
    // 退出登录
    signOut() {
      localStorage.removeItem("token");
      this.$router.go(0);
    },
    // 到达顶部
    gotoTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  .brand {
    width: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .search-quiz {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 40%;
    & > div {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 0 20px 0 10px;
      /deep/.el-input__inner {
        width: 100%;
        font-size: 15px;
        color: #1a1a1a;
        border-radius: 2px;
        box-sizing: border-box;
        background-color: #f6f6f6;
        &::-webkit-input-placeholder {
          font-size: 15px;
          color: #b0b7c5;
        }
      }
      .prefix-search {
        cursor: pointer;
        font-size: 15px;
        pointer-events: unset;
      }
      & > span {
        padding: 11px;
        color: #fff;
        font-size: 15px;
        border-radius: 0 3px 3px 0;
        background-color: #6b9147;
        cursor: pointer;
      }
    }
    .btn-quiz {
      font-size: 15px;
      color: #fff;
      background-color: #6b9147;
      border: 1px solid #6b9147;
      &:hover {
        background-color: #689d35;
      }
    }
  }
  .nav-item {
    position: relative;
    display: flex;
    a {
      text-decoration: none;
      color: #7d8178;
    }
    li {
      font-size: 17px;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        color: #333;
      }
      &.active {
        color: #000;
      }
      &.active:after {
        position: absolute;
        bottom: -16px;
        left: 0;
        display: inline-block;
        width: 100%;
        border-bottom: 4px solid #6b9147;
        content: "";
      }
    }
  }
  .message {
    position: relative;
    font-size: 17px;
    color: #7d8178;
    cursor: pointer;
  }
  .cover-message {
    z-index: 1;
    position: absolute;
    top: 60px;
    right: -45px;
    display: flex;
    flex-direction: column;
    width: 100px;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 10px #eaeaea;
    &:before {
      z-index: 0;
      position: absolute;
      top: -15px;
      left: 50px;
      content: "";
      width: 0;
      border: solid;
      border-color: transparent transparent #fff transparent;
      border-width: 0 10px calc(10px * 1.732);
      text-shadow: 0 0 5px #333333;
    }
    li {
      margin: 10px 0;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      &:hover {
        color: #666;
      }
      .icon {
        width: 18px;
        height: 18px;
        padding-right: 10px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    /*display: none;*/
  }
  .user {
    position: relative;
    .user-info-cover {
      z-index: 9999;
      position: absolute;
      top: 60px;
      right: -25px;
      display: flex;
      flex-direction: column;
      width: 60px;
      padding: 10px;
      text-align: center;
      background-color: #fff;
      box-shadow: 0 0 10px #eaeaea;
      &:before {
        z-index: 0;
        position: absolute;
        top: -15px;
        left: 30px;
        content: "";
        width: 0;
        border: solid;
        border-color: transparent transparent #fff transparent;
        border-width: 0 10px calc(10px * 1.732);
        text-shadow: 0 0 5px #333333;
      }
      li {
        margin: 5px 0;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        &:hover {
          color: #666;
        }
      }
    }
    cursor: pointer;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .user-login {
      font-size: 15px;
      color: #fff;
      border: #6b9147;
      background-color: #6b9147;
      &:hover {
        background-color: #689d35;
      }
    }
  }
  .login-box {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    .login-cover {
      position: relative;
      width: 400px;
      margin: 150px auto 0 auto;
      box-sizing: border-box;
      border-radius: 4px;
      background-color: #fff;
      .icon-close {
        position: absolute;
        top: 30px;
        right: -50px;
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../assets/images/icon-close.png") no-repeat;
        cursor: pointer;
      }
      .password-pane {
        padding: 40px 30px 10px;
        span {
          padding: 5px 0;
          color: #000;
          font-size: 16px;
          cursor: pointer;
        }
        & > span:first-child {
          margin-right: 50px;
        }
        & > .active {
          font-weight: bold;
          border-bottom: 4px solid #6b9147;
        }
      }
      .password-free-login {
        padding: 20px 30px;
        & > div:first-child {
          display: flex;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #d5d5d5;
        }
        & > div:nth-child(2) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 0 5px 0;
          border-bottom: 1px solid #d5d5d5;
        }
        .tel-select {
          -webkit-appearance: none;
          width: 85px;
          height: 30px;
          letter-spacing: 2px;
          font-size: 15px;
          color: #95998f;
          cursor: pointer;
          & > option {
            border: none;
            color: #8590a6;
          }
          & > option:hover {
            background-color: #999;
          }
        }
        .icon-ud-arrow {
          display: inline-block;
          width: 10px;
          height: 14px;
          margin-right: 20px;
          background-size: 100% 100%;
          cursor: pointer;
        }
        .tel-input {
          width: 170px;
          height: 30px;
          padding: 0 15px;
          line-height: 30px;
          font-size: 15px;
          &::-webkit-input-placeholder {
            font-size: 15px;
            color: #d5d5d5;
          }
        }
        .phone-code {
          width: 200px;
          height: 30px;
          font-size: 15px;
          &::-webkit-input-placeholder {
            font-size: 15px;
            color: #d5d5d5;
          }
        }
        .get-code {
          font-size: 15px;
          color: #6b9147;
          border: none;
          background-color: #fff;
          cursor: pointer;
        }
        .wait-code {
          font-size: 15px;
          color: #999;
          border: none;
          background-color: #fff;
        }
        /*& > p {*/
        /*  width: 100%;*/
        /*  margin-top: 10px;*/
        /*  text-align: right;*/
        /*  span {*/
        /*    font-size: 15px;*/
        /*    color: #95998f;*/
        /*    cursor: pointer;*/
        /*  }*/
        /*}*/
        .btn-login {
          width: 100%;
          height: 35px;
          margin: 30px auto;
          font-size: 15px;
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
          background-color: #6b9147;
          border: none;
        }
        .protocol {
          width: 100%;
          padding: 20px 30px;
          margin-left: -30px;
          font-size: 14px;
          color: #95998f;
          background-color: #f6f6f6;
          & > p:first-child {
            margin-bottom: 10px;
          }
        }
        .fast-login {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          font-size: 15px;
          color: #95998f;
          span {
            cursor: pointer;
            &:hover {
              color: #555;
            }
          }
          div {
            cursor: pointer;
          }
          i {
            display: inline-block;
            width: 22px;
            height: 22px;
            margin-right: 5px;
            background-size: 100% 100%;
          }
        }
      }
      .password-login {
        padding: 20px 30px;
        & > div:first-child {
          display: flex;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #d5d5d5;
        }
        & > div:nth-child(2) {
          display: flex;
          /*justify-content: space-between;*/
          align-items: center;
          padding: 20px 0 5px 0;
          border-bottom: 1px solid #d5d5d5;
        }
        .tel-email-input {
          width: 230px;
          height: 30px;
          padding: 0 15px;
          line-height: 30px;
          font-size: 15px;
          &::-webkit-input-placeholder {
            color: #d5d5d5;
          }
        }
        .password-code {
          width: 280px;
          height: 30px;
          padding: 0 15px;
          line-height: 30px;
          font-size: 15px;
          &::-webkit-input-placeholder {
            color: #d5d5d5;
          }
        }
        .el-icon-view {
          cursor: pointer;
        }
        .unlook:after {
          content: "/";
          position: absolute;
          right: 49px;
          font-size: 15px;
          font-weight: bold;
          color: #777;
        }
        & > p {
          width: 100%;
          margin-top: 10px;
          text-align: right;
          text-decoration: none;
          a {
            font-size: 15px;
            color: #95998f;
            text-decoration: none;
            cursor: pointer;
          }
        }
        .btn-login {
          width: 100%;
          height: 35px;
          margin: 20px 0;
          font-size: 15px;
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
          background-color: #6b9147;
          border: none;
        }
        .protocol {
          width: 100%;
          padding: 20px 30px;
          margin-left: -30px;
          font-size: 14px;
          color: #95998f;
          background-color: #f6f6f6;
          & > p:first-child {
            margin-bottom: 10px;
          }
        }
        .fast-login {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          font-size: 15px;
          color: #95998f;
          span {
            cursor: pointer;
            &:hover {
              color: #555;
            }
          }
          div {
            cursor: pointer;
          }
          i {
            display: inline-block;
            width: 22px;
            height: 22px;
            margin-right: 5px;
            background-size: 100% 100%;
          }
        }
      }
      .logging-info {
        padding: 10px 30px;
        & > div {
          display: flex;
          flex-direction: column;
          label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            margin: 10px 0;
            font-size: 15px;
            border-bottom: 1px solid #eaeaea;
            /deep/.el-input {
              width: 270px;
            }
            /deep/.el-input__inner {
              border: none;
            }
          }
        }
        .btn-next {
          width: 100%;
          height: 40px;
          margin: 20px 0;
          font-size: 15px;
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
          background-color: #6b9147;
          border: none;
        }
      }
    }
  }
  .icon-wechatl {
    vertical-align: middle;
    background: url("../assets/images/wechat-l.png") no-repeat;
  }
  .icon-qq {
    vertical-align: middle;
    background: url("../assets/images/qq.png") no-repeat;
  }
  .icon-weibol {
    vertical-align: middle;
    background: url("../assets/images/weibo-l.png") no-repeat;
  }
  .quiz-box {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    .quiz-step {
      position: relative;
      width: 450px;
      height: 50vh;
      margin: 150px auto 0 auto;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 4px;
      background-color: #fff;
      .el-icon-close {
        position: absolute;
        top: 30px;
        right: -50px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
      }
      h3 {
        margin-bottom: 20px;
        span {
          color: #95998f;
        }
      }
      .select-quiz {
        width: 100%;
      }
      .related-questions {
        border: 1px solid #ccc;
        & > p {
          margin: 10px 0;
          font-size: 14px;
          color: #95998f;
        }
      }
      .btn-next {
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
    }
    .add-description {
      /*position: relative;*/
      width: 450px;
      height: 50vh;
      margin: 150px auto 0 auto;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 4px;
      background-color: #fff;
    }
  }
}
.icon-to-top {
  position: fixed;
  right: 20px;
  bottom: 220px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  background: #fff url("../assets/images/goTop.png") no-repeat center;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
  cursor: pointer;
  z-index: 5;
}
.feedback {
  position: fixed;
  right: 20px;
  bottom: 280px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  background: #fff url("../assets/images/Feedback.png") no-repeat center;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
  cursor: pointer;
  z-index: 5;
}
</style>
